<template>
  <view>
    <view class="uni-padding-wrap">
      <button
        class="btn"
        type="primary"
        @click="switchBtn(0)">切换菜单({{ directionStr }}显示)</button>
      <button
        class="btn"
        type="primary"
        @click="switchBtn('left', 'bottom')">左下角显示</button>
      <button
        class="btn"
        type="primary"
        @click="switchBtn('right', 'bottom')">右下角显示</button>
      <button
        class="btn"
        type="primary"
        @click="switchBtn('left', 'top')">左上角显示</button>
      <button
        class="btn"
        type="primary"
        @click="switchBtn('right', 'top')">右上角显示</button>
    </view>
    <uni-fab
      ref="fab"
      :pattern="pattern"
      :content="content"
      :horizontal="horizontal"
      :vertical="vertical"
      :direction="direction"
      @trigger="trigger"/>
  </view>
</template>

<script>
export default {
  data () {
    return {
      title: 'uni-fab',
      directionStr: '垂直',
      horizontal: 'left',
      vertical: 'bottom',
      direction: 'horizontal',
      pattern: {
        color: '#7A7E83',
        backgroundColor: '#fff',
        selectedColor: '#007AFF',
        buttonColor: '#007AFF'
      },
      content: [
        {
          iconPath: '/static/component.png',
          selectedIconPath: '/static/componentHL.png',
          text: '组件',
          active: false
        },
        {
          iconPath: '/static/api.png',
          selectedIconPath: '/static/apiHL.png',
          text: 'API',
          active: false
        },
        {
          iconPath: '/static/template.png',
          selectedIconPath: '/static/templateHL.png',
          text: '模版',
          active: false
        }
      ]
    }
  },
  onBackPress () {
    if (this.$refs.fab.isShow) {
      this.$refs.fab.close()
      return true
    }
    return false
  },
  methods: {
    trigger (e) {
      console.log(e)
      this.content[e.index].active = !e.item.active
      uni.showModal({
        title: '提示',
        content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    switchBtn (hor, ver) {
      if (hor === 0) {
        this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal'
        this.directionStr = this.direction === 'horizontal' ? '垂直' : '水平'
      } else {
        this.horizontal = hor
        this.vertical = ver
      }
      this.$forceUpdate()
    }
  }
}
</script>

<style>
.uni-padding-wrap {
	padding-top: 200upx;
}
.btn {
	margin: 30upx;
}
</style>
